<template>
  <div>
  <img src="../assets/beijing.png" class="bg" />
  <div id='register'>

    <div class='yuan'>
        <img style="width: 100%; height: 100% ; border-radius: 50%" src="../assets/logo.png">
    </div>
    <el-form
      :model='ruleForm'
      :rules='rules'
      ref='ruleForm'
      label-width='20px'
      class='demo-ruleForm'
    >
      <el-form-item  prop='name'>
        <el-input v-model='ruleForm.name' prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
       <el-form-item  prop='email'>
        <el-input v-model='ruleForm.email' prefix-icon="el-icon-user" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item  prop='phone'>
        <el-input v-model='ruleForm.phone' prefix-icon="el-icon-user" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm.password"  prefix-icon="el-icon-lock" autocomplete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <!-- <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" prefix-icon="el-icon-lock" autocomplete="off" placeholder="请再次确认密码"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type='primary' @click='submitForm("ruleForm")'>注册</el-button>
        <el-button><router-link to="/login">登录</router-link></el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'))
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error('两次输入密码不一致!'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      ruleForm: {
        name: '',
        email:'',
        phone:'',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
         email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
         phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个数字', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$axios.post("http://localhost:9527/backstagesupporter/main/addHfregister",this.ruleForm).then(res => {
        this.$message({message:'注册成功',type:'success',showClose:true})
        this.ruleForm={}
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
    #register {
        background-color: white;
        width: 450px !important;
        height: 400px !important;
        position: absolute;
        top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
    }
    .el-form{
        margin-top: 58px !important;

    }
    .el-form-item {
        margin-right: 68px;
    }
    .el-input{
        width: 114% !important;
    }
    element.style {
        margin-top: 30px;
    }
    .yuan {
        width: 135px;
        height: 130px;
        border-radius:50% ;
        background: #EEEEEE;
        border: 10px solid white;
        position: absolute;
        top: -30%;
        left: 34%;
        z-index: 1;
        box-shadow: darkgrey 10px 10px 40px 1px ;
    }
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
</style>
